<script setup lang="ts">

import UserAvatar from "@/components/UserAvatar/index.vue";
// import url from "@/assets/images/鬼新娘.jpg"
import url from "@/assets/images/宁姚.jpg"
</script>

<template>
  <div class="userinfo-card">
    <div class="image">
      <img :src="url" alt=""/>
    </div>
    <div class="userinfo-content">
      <UserAvatar class="user-avatar" url="src/assets/images/原神头像-胡桃.jpg" ></UserAvatar>
      <span class="name">落百沉</span>
      <!-- 座右铭      -->
      <div class="motto">
        云想衣裳花想容，春风拂槛露华浓。
      </div>
      <div class="article-correlation">
        <div class="article-num">
          <span>90</span>
          <span>文章数</span>
        </div>
        <span class="parting-line"></span>
        <div class="review-num">
          <span>91.1k</span>
          <span>评论量</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.userinfo-card {
  width: 100%;
  position: relative;
  background-color: var(--blog-background-card-color);
  overflow: hidden;
  .image {
    position: relative;
    background-image: linear-gradient(180deg, #fff 0%, #fff 100%);
    width: 100%;
    height: 240px;
    overflow: hidden;

    img {
      width: 100%;
      height: auto;
    }
  }

  .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*加上渐变背景*/
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, 0.8) 100%);
  }

  .userinfo-content {
    width: 100%;
    padding: 48px 0 0 0;
    text-align: center;
    position: relative;
    /*头像*/
    .user-avatar {
      position: absolute;
      top: -75px;
      left: 50%;
      transform: translateX(-50%);
    }

    .name {
      font-size: 18px;
      font-weight: bold;
      color: #50BFFF;
    }

    .motto {
      display: block;
      font-size: 14px;
      color: #303133;
      font-weight: bold;
    }

    .article-correlation {
      display: inline-flex;
      text-align: center;
      color: #303133;
      font-weight: bold;
      align-items: center;
      .parting-line {
        height: 46px;
        border-right: 1px solid #e6e6e6;
      }
      .article-num, .review-num {
        width: 50%;
        display: inline-block;
        padding: 16px 20px;
        color: #303133;
        span:nth-child(1) {
          display: block;
          font-size: 20px;
        }

        span:nth-child(2) {
          display: block;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
